<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      美容装饰
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="position: absolute; left: 50%; transform: translateX(-50%)"
        >美容装饰</text
      >
      <!-- #endif -->
    </view>
    <view class="tit_list">
      <scroll-view
        class="scroll-view"
        @scrolltolower="down"
        :scroll-y="modalName == '' || modalName == null"
        :scroll-top="scrollTop1"
        @scroll="scroll"
        refresher-background="#f5f5f5"
      >
        <view
          class="liss"
          v-for="(item, index) in Recommend"
          :key="index"
          @click="details(item.id)"
        >
          <image mode="aspectFit" :src="item.storeCoverImage" />
          <view class="li_3" style="max-width: 336rpx">
            <view class="title">{{ item.storeName }}</view>
            <view class="content">
              {{ item.officeAddress }}
            </view>
            <view class="distance"> {{ item.distance }}km </view>
            <view style="font-size: 28rpx" v-if="item.storeType == 1 || item.storeType == 2">
              {{ item.vehicleShelvesNumber }}辆
            </view>
            <view style="font-size: 28rpx" v-else> {{ item.serviceShelvesNumber }}项 </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import Tabbar from '@/components/tabbar.vue'
  export default {
    data() {
      return {
        modalName: '',
        pageSize: 10,
        pageNo: 1,
        longitude: '',
        latitude: '',
        serviceType: '3',
        Recommend: [],
        imgUrl: this.$imgSrc,
        scrollTop: '0',
        scrollTop1: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        CustomBar1: '',
        user: uni.getStorageSync('Pduser'),
      }
    },
    components: {
      'view-tabbar': Tabbar,
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },

    onLoad(options) {
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
      this.CustomBar1 = this.CustomBar
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    methods: {
      scroll(e) {
        this.oldScrollTop = e.detail.scrollTop
        this.scrollTop = e.detail.scrollTop
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      totop() {
        this.scrollTop1 = this.oldScrollTop
        this.$nextTick(() => {
          this.scrollTop1 = 0
        })
      },
      details(id) {
        uni.navigateTo({
          url: '/pages_owner/ownerService/ownerServiceDetails?id=' + id,
        })
      },
      down() {
        if (this.downStatus) {
          this.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getRecommend() {
        this.upStatus = false
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getDealerHomePage', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            longitude: this.longitude,
            latitude: this.latitude,
            storeType: this.serviceType,
          })
          .then((res) => {
            uni.hideLoading()
            if (!res.dealerHomePage.pageList.length) {
              this.downStatus = false
            }
            if (res.dealerHomePage.pageCount < this.pageNo * this.pageSize) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.dealerHomePage.pageList)
            uni.stopPullDownRefresh()
          })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      // 获取位置
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.getRecommend()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
              return false
            }
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    padding-bottom: 20rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .tit_list {
    margin-top: 32rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      position: relative;
      margin-bottom: 32rpx;

      .view {
        display: inline-block;
        width: 120rpx;
        height: 58rpx;
        border-radius: 8rpx;
        text-align: center;
        line-height: 58rpx;
        color: #333;
        background-color: #f2f2f2;
        margin-right: 24rpx;
        font-size: 32rpx;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }

      .sai {
        position: absolute;
        font-size: 32rpx;
        top: 4rpx;
        right: 30rpx;

        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }

    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;
      // justify-content: space-between;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_3 {
        margin-left: 24rpx;
        .title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333333;
        }

        .content {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          margin-top: 28rpx;
        }

        .distance {
          font-size: 20rpx;
          font-weight: 500;
          color: #333333;
          text-align: right;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

    image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 18rpx;
    }
  }

  .scroll-view {
    // #ifdef MP-WEIXIN
    height: calc(100vh - var(--status-bar-height) - 5px - 61px);
    // #endif
    // #ifdef H5 || APP-PLUS
    height: calc(100vh - var(--status-bar-height) - 5px - 20rpx - 122rpx);
    // #endif
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
